<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Amber - Pet Care Bootstrap 5 Template</title>

    <!-- Favicons -->
    <link rel="shortcut icon" th:href="@{/assets/images/favicon.ico}">
    <link rel="stylesheet" th:href="@{/assets/css/vendor/vendor.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/plugins/plugins.min.css}">
    <script th:src="@{/assets/js/jquery-3.2.1.slim.min.js}"></script>

    <link rel="stylesheet" th:href="@{/assets/css/style.min.css}">
    <script th:src="@{/assets/js/vue.js}"></script>
    <script th:src="@{/assets/js/axios.min.js}"></script>
    <script th:src="@{/assets/js/vue-router.js}"></script>
    <script th:src="@{/assets/js/jquery-3.2.1.slim.min.js}"></script>
    <script type="text/javascript" th:src="@{/assets/js/jquery-3.2.1.slim.min.js}"></script>
    <link rel="stylesheet" th:href="@{https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css}" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <style>
        *{
            padding: 0;
            margin:0;
        }
        body{
            width: 100%;
            height:100%;
            background: #fff;
        }
        .toggleModal{
            padding: 10px 20px;
            color: white;
            background: #e0a800;
            border:none;
            box-shadow: 2px 3px 20px rgba(0,0,0,0.2);
            position: absolute;
            left: 30%;
            top: 99%;
            transform: translate(-50%,-50%);
        }
        .close btn{

        }
        .mask{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.4);
            z-index: 100;
            display: none;
        }
        .modal{
            position: absolute;
            top: 50%;
            left: 50%;
            width: 400px;
            transform: translate(-50%,-50%);
            border-radius: 5px;
            background: #fff;
            box-shadow: 2px 3px 20px rgba(0,0,0,0.2);
            z-index: 120;
            display: none;
        }
        .modal .modal-header{
            height: 50px;
            border-bottom: 1px solid #f5f5f5;
            padding: 0 15px;
        }
        .modal .modal-header p {
            line-height: 50px;
            display: inline-block;
        }
        .modal .modal-header .title{
            font-size: 18px;
            color: #333;
        }
        .modal .modal-header .close{
            float: right;
            font-size: 26px;
            margin-top: -2px;
            color: #9C9FA4;
            cursor: default;
        }
        .modal .modal-content{
            min-height: 100px;
        }

        .modal .modal-footer .btn{
            padding: 0 20px;
            height: 36px;
            line-height: 36px;
            color: white;
            background:sandybrown;
            border: none;
        }
        .modal .modal-footer{
            border-top: 1px solid #f5f5f5;
            padding: 15px;
            text-align: right;

        }
        .container::after{
            content:"";
            display: block;
            clear: both;
        }
        .dzbk{
            border-color: #66afe9;
            outline: 0;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
            margin: 0 auto;
            padding: 0 10px;
            width: 536px;
            height: 34px;
            border: 1px solid rgba(255,255,255,.8);
            /*
            border-radius: 2px;
            color: #fff;
            background: rgba(18,7,0,.15);*/
        }
        .grxx{
            border:0px;
            padding: 0 10px;
            width: 536px;
            height: 34px;
        }
        .touxiang{
            float:right;
            width:220px;
            height: 220px;
            background-color: #bad0ef;
            border-radius: 150px;
            margin-top:-220px;
        }
        .tab-pane fade{
            font-size: 80px;
        }

        #addressTable {
            width: 90%;
        }
        #addressTable,#addressTable tr , #addressTable th , #addressTable td{
            border: 1px solid #000;
            border-collapse: collapse;
        }


    </style>
    <link rel="stylesheet" th:href="@{/assets/css/bootstrap.min.css}">

</head>

<body>

<!-- 头部导航栏，引入公共片页面 -->
<div class="header section" th:replace="~{common/head::head}"></div>
        <!-- Header Top End -->

        <!-- Header Bottom Start -->

    <!-- Header Section End -->

    <!-- Breadcrumb Area Start -->
    <div class="section breadcrumb-area bg-name-bright">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center">
                    <div class="breadcrumb-wrapper">
                        <h2 class="breadcrumb-title">个人中心</h2>
                        <ul>
                            <li><a th:href="@{/goods/show}">Home</a></li>
                            <li>My Account</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Breadcrumb Area End -->

    <!-- My Account Section Start -->
    <div class="section section-margin">
        <div class="container">

            <div class="row">
                <div class="col-lg-12">

                    <!-- My Account Page Start -->
                    <div class="myaccount-page-wrapper">
                        <div class="row">

                            <!-- My Account Tab Menu Start -->
                            <div class="col-lg-3 col-md-4">
                                <div class="myaccount-tab-menu nav" role="tablist">
                                   <!-- <a th:href="@{#}dashboad" class="active" data-bs-toggle="tab"><i class="fa fa-dashboard"></i>
                                        Dashboard</a>-->
                                    <a th:href="@{#orders}" data-bs-toggle="tab"><i class="fa fa-cart-arrow-down"></i>我的订单</a>
                                   <!-- <a th:href="@{#}download" data-bs-toggle="tab"><i class="fa fa-cloud-download"></i> Download</a>-->
                                  <!--  <a th:href="@{#}payment-method" data-bs-toggle="tab"><i class="fa fa-credit-card"></i> Payment Method</a>-->
                                    <a th:href="@{#address-edit}" data-bs-toggle="tab"><i class="fa fa-map-marker"></i>地址</a>

                                   <a th:href="@{#account-info}" data-bs-toggle="tab"><i class="fa fa-user"></i> 查看个人信息</a>
                                    <a th:href="@{/exit}"><i class="fa fa-sign-out"></i>退出</a>
                                </div>
                            </div>
                            <!-- My Account Tab Menu End -->

                            <!-- My Account Tab Content Start -->
                            <div class="col-lg-9 col-md-8">
                                <div class="tab-content" id="myaccountContent">

                                    <!-- Single Tab Content Start -->
                                    <div style="font-size:20px" class="tab-pane fade show active" id="dashboad" role="tabpanel">
                                        <div class="myaccount-content">
                                            <h3 class="title">Hello!</h3>
                                            <div class="welcome">
                                                <input  style="border:0px" type="text" th:value="${user.userName}"><p/>
                                                <!--<p>ogin.html" class="logout"> Logout</a>)</p>-->
                                            </div>
                                           <!-- <p class="mb-0"th:value="${user.userName}"></p>-->

                                        </div>
                                    </div>
                                    <!-- Single Tab Content End -->

                                    <!-- Single Tab Content Start -->
                                    <div class="tab-pane fade" id="orders" role="tabpanel">
                                        <div class="myaccount-content">
                                            <h3 class="title">订单列表</h3>

                                            <div class="myaccount-table table-responsive text-center">
                                                <table class="table table-bordered" >
                                                    <thead class="thead-light">
                                                        <tr>
                                                            <th>订单号</th>
                                                            <th>创建时间</th>
                                                            <th>价格</th>
                                                            <th>状态</th>
                                                            <th>操作</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr th:each="o:${orderlist}">
                                                            <td th:text="${o.orderId}"></td>
                                                            <td th:text="${#dates.format(o.createTime,'yyyy-MM-dd')}"></td>
                                                            <td th:text="${o.totalPrice}"></td>
                                                            <td th:switch="${o.orderStatus}">
                                                                <strong th:case="1">未付款</strong>
                                                                <strong th:case="2">已付款</strong>
                                                                <strong th:case="3">已发货</strong>
                                                                <strong th:case="4">已收货</strong>
                                                                <strong th:case="5">申请退款</strong>
                                                                <strong th:case="6">退款中</strong>
                                                                <strong th:case="7">退款申请失败</strong>
                                                            </td>
                                                            <td>
                                                                <a th:href="@{/order/toMyOrder(orderId=${o.orderId})}">查看详情</a>
                                                            </td>
<!--
                                                            <td><a th:href="cart.html" class="btn btn btn-dark btn-hover-primary btn-sm rounded-0">View</a></td>
-->
                                                        </tr>


                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Single Tab Content End -->

                                    <!-- Single Tab Content Start -->
                                    <div class="tab-pane fade" id="download" role="tabpanel">
                                        <div class="myaccount-content">
                                            <h3 class="title">Downloads</h3>
                                            <div class="myaccount-table table-responsive text-center">
                                                <table class="table table-bordered">
                                                    <thead class="thead-light">
                                                        <tr>
                                                            <th>Product</th>
                                                            <th>Date</th>
                                                            <th>Expire</th>
                                                            <th>Download</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr>
                                                            <td>Haven - Free Real Estate PSD Template</td>
                                                            <td>Aug 22, 2018</td>
                                                            <td>Yes</td>
                                                            <td><a th:href="@{#}" class="btn btn btn-dark btn-hover-primary rounded-0"><i class="fa fa-cloud-download m-r-5"></i> Download File</a></td>
                                                        </tr>
                                                        <tr>
                                                            <td>TechWorld - Profolio Business Template</td>
                                                            <td>Sep 12, 2018</td>
                                                            <td>Never</td>
                                                            <td><a th:href="@{#}" class="btn btn btn-dark btn-hover-primary rounded-0"><i class="fa fa-cloud-download m-r-5"></i> Download File</a></td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Single Tab Content End -->

                                    <!-- Single Tab Content Start -->
                                    <div class="tab-pane fade" id="payment-method" role="tabpanel">
                                        <div class="myaccount-content">
                                            <h3 class="title">Payment Method</h3>
                                            <p class="saved-message">You Can't Saved Your Payment Method yet.</p>
                                        </div>
                                    </div>
                                    <!-- Single Tab Content End -->

                                    <!-- Single Tab Content Start -->
                                    <div style="font-size: 20px"class="tab-pane fade" id="address-edit" role="tabpanel">
                                        <div class="myaccount-content">
                                            <h3 class="title">我的地址</h3>

                                                  <table id="addressTable"   border-collapse="">

                                                      <tr>
                                                          <th>id</th>
                                                          <th>省/市/区</th>
                                                          <th>具体地址</th>
                                                          <th>姓名</th>
                                                          <th>手机号</th>

                                                      </tr>
                                                      <tr th:each="e:${addressList}">
                                                          <td>[[${e.addressId}]]</td>
                                                          <td>[[${e.area}]]</td>
                                                          <td>[[${e.itemAddress}]]</td>
                                                          <td>[[${e.receiverName}]]</td>
                                                          <td>[[${e.receiverPhone}]]</td>

                                                      </tr>


                                                  </table>

                                        </div>
                                    </div>
                                    <div style="font-size: 20px" class="tab-pane fade" id="account-info" role="tabpanel">
                                        <div class="myaccount-content">
                                            <form id="form1" th:action="@{/modifyUser}" method="post">
                                               <!-- <input type="hidden" th:value="${user.userId}" name="userId">-->
                                                用户名:&nbsp;&nbsp;&nbsp;&nbsp;<input  style="border:0px" type="text" disabled="disabled"id="eee"th:value="${user.userName}" name="userName"> <span  class="glyphicon glyphicon-pencil" aria-hidden="true"></span><p/>
                                                密&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;&nbsp;&nbsp;&nbsp;<input id="ddd"  disabled="disabled"style="border:0px" type="password" th:value="${user.password}" name="password"/> <span  class="glyphicon glyphicon-pencil" aria-hidden="true"></span> <p/>
                                                手机号:&nbsp;&nbsp;&nbsp;&nbsp;<input style="border:0px" id="ccc"  disabled="disabled"type="text" th:value="${user.userPhone}" name="userPhone"/> <span  class="glyphicon glyphicon-pencil" aria-hidden="true"></span> <p/>
                                                邮&nbsp;&nbsp;&nbsp;&nbsp;箱:&nbsp;&nbsp;&nbsp;&nbsp;<input id="bbb"  disabled="disabled"style="border:0px" type="text" th:value="${user.userEmail}" name="userEmail"/> <span  class="glyphicon glyphicon-pencil" aria-hidden="true"></span> <p/>
                                                性&nbsp;&nbsp;&nbsp;&nbsp;别:&nbsp;&nbsp;&nbsp;&nbsp;<input id="aaa"   disabled="disabled" style="border:0px" type="text" th:value="${user.sex}" name="sex"/> <span  class="glyphicon glyphicon-pencil" aria-hidden="true"></span><p/>
<!--
                                                <span th:onclick="change()" class="btn btn btn-dark btn-hover-primary rounded-0"><i class="fa fa-edit m-r-10"></i> >修改</span>
-->
                                                <button style="font-size: 20px" type="submit" class="btn btn btn-dark btn-hover-primary rounded-0"><i class="fa fa-edit m-r-10"></i>提交</button>
                                            </form>

                                            <div  style="float:right">
                                                <p>
                                                    <img class="touxiang" th:src="'http://localhost:8080/uploadFile/user/'+${user.avatar}"/>
                                                </p>
                                                <form action="/modifyAvatar" method="post" enctype="multipart/form-data" style="text-align:right">
                                                    <input type="file" name="myAvatar">
                                                    <button style="background-color: #e2e3e5">点击确认修改头像</button>
                                                </form>

                                            </div>

                                        </div>


                            </div>
                            <!-- My Account Tab Content End -->

                        </div>
                    </div>
                    <!-- My Account Page End -->

                </div>
            </div>

        </div>
    </div>
    <!-- My Account Section End -->

    <!-- Footer Section Start -->
    <footer class="section footer-section">
        <!-- Footer Top Start -->
        <div class="footer-top bg-name-bright section-padding">
            <div class="container">
                <div class="row m-b-n40">
                    <div class="col-12 col-sm-6 col-lg-3 m-b-40" data-aos="fade-up" data-aos-duration="1000">
                        <div class="single-footer-widget">
                            <h1 class="widget-title">About Us</h1>
                            <p class="desc-content">Lorem ipsum dolor sit amet, co adipisi elit, sed eiusmod tempor incididunt ut labore et dolore</p>
                            <!-- Soclial Link Start -->
                            <div class="widget-social justify-content-start m-b-n10">
                                <a title="Twitter" th:href="@{#/}"><i class="icon-social-twitter"></i></a>
                                <a title="Instagram" th:href="@{#/}"><i class="icon-social-instagram"></i></a>
                                <a title="Linkedin" th:href="@{#/}"><i class="icon-social-linkedin"></i></a>
                                <a title="Skype" th:href="@{#/}"><i class="icon-social-skype"></i></a>
                                <a title="Dribble" th:href="@{#/}"><i class="icon-social-dribbble"></i></a>
                            </div>
                            <!-- Social Link End -->
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3 m-b-40" data-aos="fade-up" data-aos-duration="1200">
                        <div class="single-footer-widget">
                            <h2 class="widget-title">Useful Links</h2>
                            <ul class="widget-list">
                                <li><a th:href="wishlist.html">Help & Contact Us</a></li>
                                <li><a th:href="contact.html">Returns & Refunds</a></li>
                                <li><a th:href="contact.html">Online Stores</a></li>
                                <li><a th:href="contact.html">Terms & Conditions</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3 m-b-40" data-aos="fade-up" data-aos-duration="1400">
                        <div class="single-footer-widget">
                            <h2 class="widget-title">Help</h2>
                            <ul class="widget-list">
                                <li><a th:href="wishlist.html">Wishlist</a></li>
                                <li><a th:href="contact.html">Pricing Plans</a></li>
                                <li><a th:href="contact.html">Order Traking</a></li>
                                <li><a th:href="contact.html">Returns</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3 m-b-40" data-aos="fade-up" data-aos-duration="1600">
                        <div class="single-footer-widget">
                            <h2 class="widget-title">Send newsletter</h2>
                            <div class="widget-body">
                                <p class="desc-content m-b-20">Subscribe to our newsletter and get 10% off your first purchase..</p>
                                <!-- Newsletter Form Start -->
                                <div class="newsletter-form-wrap p-t-5">
                                    <form id="mc-form" class="mc-form">
                                        <input type="email" id="mc-email" class="form-control email-box" placeholder="demo@example.com" name="EMAIL">
                                        <button id="mc-submit" class="newsletter-btn" type="submit">Send</button>
                                    </form>
                                    <!-- mailchimp-alerts Start -->
                                    <div class="mailchimp-alerts text-centre">
                                        <div class="mailchimp-submitting"></div><!-- mailchimp-submitting end -->
                                        <div class="mailchimp-success text-success"></div><!-- mailchimp-success end -->
                                        <div class="mailchimp-error text-danger"></div><!-- mailchimp-error end -->
                                    </div>
                                    <!-- mailchimp-alerts end -->
                                </div>
                                <!-- Newsletter Form End -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Footer Top End -->

        <!-- Footer Bottom Start -->
        <div class="footer-bottom bg-name-light p-t-20 p-b-20">
            <div class="container">
                <div class="row align-items-center m-b-n20">
                    <div class="col-md-6 text-center text-md-start order-2 order-md-1 m-b-20">
                        <div class="copyright-content">
                            <p class="mb-0">Copyright &copy; 2021.Company name All rights reserved.<a target="_blank" th:href="@{https://sc.chinaz.com/moban/}">&@{#}x7F51;&@{#}x9875;&@{#}x6A21;&@{#}x677F;</a></p>
                        </div>
                    </div>
                    <div class="col-md-6 text-center text-md-end order-1 order-md-2 m-b-20">
                        <div class="payment">
                            <a th:href="@{#/}">
                                <img class="fit-image" th:src="@{/assets/images/payment/payment_large.png}" alt="Payment">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Footer Bottom End -->
    </footer>
    <!-- Footer Section End -->

    <!-- Modal Start  -->
    <div class="modalquickview modal fade" id="quick-view" tabindex="-1" aria-labelledby="quick-view" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <button class="btn close" data-bs-dismiss="modal">×</button>
                <div class="row">
                    <div class="col-md-6 col-12">

                        <!-- Product Details Image Start -->
                        <div class="modal-product-carousel">

                            <!-- Single Product Image Start -->
                            <div class="swiper-container">
                                <div class="swiper-wrapper">
                                    <a class="swiper-slide" th:href="@{#}">
                                        <img class="w-100" th:src="@{/assets/images/products/large-product/1.png}" alt="Product">
                                    </a>
                                    <a class="swiper-slide" th:href="@{#}">
                                        <img class="w-100" th:src="@{/assets/images/products/large-product/2.png}" alt="Product">
                                    </a>
                                    <a class="swiper-slide" th:href="@{#}">
                                        <img class="w-100" th:src="@{/assets/images/products/large-product/3.png}" alt="Product">
                                    </a>
                                    <a class="swiper-slide" th:href="@{#}">
                                        <img class="w-100" th:src="@{/assets/images/products/large-product/4.png}" alt="Product">
                                    </a>
                                    <a class="swiper-slide" th:href="@{#}">
                                        <img class="w-100" th:src="@{/assets/images/products/large-product/5.png}" alt="Product">
                                    </a>
                                </div>

                                <!-- Swiper Pagination Start -->
                                <!-- <div class="swiper-pagination d-md-none"></div> -->
                                <!-- Swiper Pagination End -->

                                <!-- Next Previous Button Start -->
                                <div class="swiper-product-button-next swiper-button-next"><i class="ti-arrow-right"></i></div>
                                <div class="swiper-product-button-prev swiper-button-prev"><i class="ti-arrow-left"></i></div>
                                <!-- Next Previous Button End -->
                            </div>
                            <!-- Single Product Image End -->

                        </div>
                        <!-- Product Details Image End -->

                    </div>
                    <div class="col-md-6 col-12 overflow-hidden position-relative">

                        <!-- Product Summery Start -->
                        <div class="product-summery position-relative">

                            <!-- Product Head Start -->
                            <div class="product-head m-b-15">
                                <h2 class="product-title">Single Product Slider</h2>
                            </div>
                            <!-- Product Head End -->

                            <!-- Rating Start -->
                            <span class="rating justify-content-start m-b-10">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star-half-o"></i>
                            <i class="fa fa-star-o"></i>
                        </span>
                            <!-- Rating End -->

                            <!-- Price Box Start -->
                            <div class="price-box m-b-10">
                                <span class="regular-price">$70.00</span>
                                <span class="old-price"><del>$85.00</del></span>
                            </div>
                            <!-- Price Box End -->

                            <!-- SKU Start -->
                            <div class="sku m-b-15">
                                <span>SKU: 12345</span>
                            </div>
                            <!-- SKU End -->

                            <!-- Product Inventory Start -->
                            <div class="product-inventroy m-b-15">
                                <span class="inventroy-title"> <strong>Availability:</strong></span>
                                <span class="inventory-varient">12 Left in Stock</span>
                            </div>
                            <!-- Product Inventory End -->

                            <!-- Description Start -->
                            <p class="desc-content m-b-25">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                            <!-- Description End -->

                            <!-- Quantity Start -->
                            <div class="quantity d-flex align-items-center justify-content-start m-b-25">
                                <span class="m-r-10"><strong>Qty: </strong></span>
                                <div class="cart-plus-minus">
                                    <input class="cart-plus-minus-box" value="1" type="text">
                                    <div class="dec qtybutton"></div>
                                    <div class="inc qtybutton"></div>
                                </div>
                            </div>
                            <!-- Quantity End -->

                            <!-- Cart Button Start -->
                            <div class="cart-btn action-btn m-b-30">
                                <div class="action-cart-btn-wrapper d-flex justify-content-start">
                                    <div class="add-to_cart">
                                        <a class="btn btn-primary btn-hover-dark rounded-0" th:href="cart.html">Add to cart</a>
                                    </div>
                                    <a th:href="wishlist.html" title="Wishlist" class="action"><i class="ti-heart"></i></a>
                                </div>
                            </div>
                            <!-- Cart Button End -->

                            <!-- Social Shear Start -->
                            <div class="social-share">
                                <div class="widget-social justify-content-center m-b-30">
                                    <a title="Twitter" th:href="@{#/}"><i class="icon-social-twitter"></i></a>
                                    <a title="Instagram" th:href="@{#/}"><i class="icon-social-instagram"></i></a>
                                    <a title="Linkedin" th:href="@{#/}"><i class="icon-social-linkedin"></i></a>
                                    <a title="Skype" th:href="@{#/}"><i class="icon-social-skype"></i></a>
                                    <a title="Dribble" th:href="@{#/}"><i class="icon-social-dribbble"></i></a>
                                </div>
                            </div>
                            <!-- Social Shear End -->

                            <!-- Payment Option Start -->
                            <div class="payment-option m-t-20 d-flex justify-content-start">
                                <span><strong>Payment: </strong></span>
                                <a th:href="@{#}">
                                    <img class="fit-image m-l-5" th:src="@{/assets/images/payment/payment_large.png}" alt="Payment Option Image">
                                </a>
                            </div>
                            <!-- Payment Option End -->

                        </div>
                        <!-- Product Summery End -->

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal End  -->

    <!-- Scroll Top Start -->
    <a th:href="@{#}" class="scroll-top show" id="scroll-top">
        <i class="arrow-top ti-angle-double-up"></i>
        <i class="arrow-bottom ti-angle-double-up"></i>
    </a>
    <!-- Scroll Top End -->

    <!-- Mobile Menu Start -->
    <div class="mobile-menu-wrapper">
        <div class="offcanvas-overlay"></div>

        <!-- Mobile Menu Inner Start -->
        <div class="mobile-menu-inner">

            <!-- Button Close Start -->
            <div class="offcanvas-btn-close">
                <i class="fa fa-times"></i>
            </div>
            <!-- Button Close End -->

            <!-- Mobile Menu Inner Wrapper Start -->
            <div class="mobile-menu-inner-wrapper">
                <!-- Mobile Menu Search Box Start -->
                <div class="search-box-offcanvas">
                    <form>
                        <input class="search-input-offcanvas" type="text" placeholder="Search product...">
                        <button class="search-btn"><i class="icon-magnifier"></i></button>
                    </form>
                </div>
                <!-- Mobile Menu Search Box End -->

                <!-- Mobile Menu Start -->
                <div class="mobile-navigation">
                    <nav>
                        <ul class="mobile-menu">
                            <li class="has-children">
                                <a th:href="@{#}">Home <i class="fa fa-angle-down"></i></a>
                                <ul class="dropdown">
                                    <li><a th:href="index.html">Home One</a></li>
                                    <li><a th:href="index.html">Home Two</a></li>
                                    <li><a th:href="index-3.html">Home Three</a></li>
                                    <li><a th:href="index-4.html">Home Four</a></li>
                                </ul>
                            </li>
                            <li class="has-children">
                                <a th:href="@{#}">Shop <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                                <ul class="dropdown">
                                    <li><a th:href="shop.html">Shop Grid</a></li>
                                    <li><a th:href="shop-left-sidebar.html">Shop Left Sidebar</a></li>
                                    <li><a th:href="shop-right-sidebar.html">Shop Right Sidebar</a></li>
                                    <li><a th:href="shop-list-fullwidth.html">Shop List Fullwidth</a></li>
                                    <li><a th:href="shop-list-left-sidebar.html">Shop List Left Sidebar</a></li>
                                    <li><a th:href="shop-list-right-sidebar.html">Shop List Right Sidebar</a></li>
                                    <li><a th:href="wishlist.html">Wishlist</a></li>
                                    <li><a th:href="cart.html">Shopping Cart</a></li>
                                    <li><a th:href="checkout.html">Checkout</a></li>
                                    <li><a th:href="compare.html">Compare</a></li>
                                </ul>
                            </li>
                            <li class="has-children">
                                <a th:href="@{#}">Product <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                                <ul class="dropdown">
                                    <li><a th:href="single-product.html">Single Product</a></li>
                                    <li><a th:href="single-product-sale.html">Single Product Sale</a></li>
                                    <li><a th:href="single-product-group.html">Single Product Group</a></li>
                                    <li><a th:href="single-product-normal.html">Single Product Normal</a></li>
                                    <li><a th:href="single-product-affiliate.html">Single Product Affiliate</a></li>
                                    <li><a th:href="single-product-slider.html">Single Product Slider</a></li>
                                </ul>
                            </li>
                            <li class="has-children">
                                <a th:href="@{#}">Pages <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                                <ul class="dropdown">
                                    <li><a th:href="about.html">About Us</a></li>
                                    <li><a th:href="contact.html">Contact</a></li>
                                    <li><a th:href="faq.html">Faq</a></li>
                                    <li><a th:href="error-404.html">Error 404</a></li>
                                    <li><a th:href="my-account.html">My Account</a></li>
                                    <li><a th:href="login.html">Login | Register</a></li>
                                </ul>
                            </li>
                            <li class="has-children">
                                <a th:href="@{#}">Blog <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                                <ul class="dropdown">
                                    <li><a th:href="blog.html">Blog</a></li>
                                    <li><a th:href="blog-left-sidebar.html">Blog Left Sidebar</a></li>
                                    <li><a th:href="blog-right-sidebar.html">Blog Right Sidebar</a></li>
                                    <li><a th:href="blog-details.html">Blog Details</a></li>
                                    <li><a th:href="blog-details-sidebar.html">Blog Details Sidebar</a></li>
                                </ul>
                            </li>
                            <li><a th:href="about.html">About</a></li>
                            <li><a th:href="contact.html">Contact</a></li>
                        </ul>
                    </nav>
                </div>
                <!-- Mobile Menu End -->

                <!-- Language, Currency & Link Start -->
                <div class="offcanvas-lag-curr m-b-30">
                    <div class="header-top-lan-curr-link">
                        <div class="header-top-lan dropdown">
                            <h4 class="title">Language:</h4>
                            <button class="dropdown-toggle" data-bs-toggle="dropdown">English <i class="fa fa-angle-down"></i></button>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li><a class="dropdown-item" th:href="@{#}">English</a></li>
                                <li><a class="dropdown-item" th:href="@{#}">Japanese</a></li>
                                <li><a class="dropdown-item" th:href="@{#}">Arabic</a></li>
                                <li><a class="dropdown-item" th:href="@{#}">Romanian</a></li>
                            </ul>
                        </div>
                        <div class="header-top-curr dropdown">
                            <h4 class="title">Currency:</h4>
                            <button class="dropdown-toggle" data-bs-toggle="dropdown">USD <i class="fa fa-angle-down"></i></button>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li><a class="dropdown-item" th:href="@{#}">USD</a></li>
                                <li><a class="dropdown-item" th:href="@{#}">Pound</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- Language, Currency & Link End -->

                <!-- Contact Links/Social Links Start -->
                <div class="mt-auto bottom-0">

                    <!-- Contact Links Start -->
                    <ul class="contact-links">
                        <li><i class="fa fa-phone"></i><a th:href="@{#}"> +012 3456 789</a></li>
                        <li><i class="fa fa-envelope-o"></i><a th:href="@{#}"> info@example.com</a></li>
                        <li><i class="fa fa-clock-o"></i> <span>Monday - Sunday 9.00 - 18.00</span> </li>
                    </ul>
                    <!-- Contact Links End -->

                    <!-- Social Widget Start -->
                    <div class="widget-social">
                        <a title="Facebook" th:href="@{#}"><i class="fa fa-facebook-f"></i></a>
                        <a title="Twitter" th:href="@{#}"><i class="fa fa-twitter"></i></a>
                        <a title="Linkedin" th:href="@{#}"><i class="fa fa-linkedin"></i></a>
                        <a title="Youtube" th:href="@{#}"><i class="fa fa-youtube"></i></a>
                        <a title="Vimeo" th:href="@{#}"><i class="fa fa-vimeo"></i></a>
                    </div>
                    <!-- Social Widget Ende -->
                </div>
                <!-- Contact Links/Social Links End -->
            </div>
            <!-- Mobile Menu Inner Wrapper End -->

        </div>
        <!-- Mobile Menu Inner End -->
    </div>
    <!-- Mobile Menu End -->

    <!-- Global Vendor, plugins JS -->

    <!-- Vendor JS -->


    <!-- 
    <script th:src="assets/js/vendor/popper.min.js"></script>
    <script th:src="assets/js/vendor/bootstrap.min.js"></script>
    <script th:src="assets/js/vendor/jquery-3.6.0.min.js"></script>
    <script th:src="assets/js/vendor/jquery-migrate-3.3.2.min.js"></script>
    <script th:src="assets/js/vendor/modernizr-3.11.2.min.js"></script>   
    -->


    <!-- Plugins JS -->


    <!-- 
    <script th:src="assets/js/plugins/aos.min.js"></script>
    <script th:src="assets/js/plugins/jquery.ajaxchimp.min.js"></script>
    <script th:src="assets/js/plugins/jquery-ui.min.js"></script>
    <script th:src="assets/js/plugins/nice-select.min.js"></script>
    <script th:src="assets/js/plugins/swiper-bundle.min.js"></script>
    <script th:src="assets/js/plugins/countdown.min.js"></script>
    <script th:src="assets/js/plugins/lightgallery-all.min.js"></script>  
    -->


    <!-- Use the minified version files listed below for better performance and remove the files listed above -->

    <script th:src="@{/assets/js/vendor.min.js}"></script>
    <script th:src="@{/assets/js/plugins.min.js}"></script>

    <!--Main JS-->
    <script th:src="@{/assets/js/main.js}"></script>

</body>

<script type="text/javascript">

    $("#form1 span").click(function () {
        // $(this).attr("disabled",false)

        // console.log(this)

        //错误的
        // console.log(this[0])

        //貌似是对的
        console.log($(this))

        $(this).siblings().attr("disabled",false)


        //等价于this
        // console.log($(this)[0]);

        //错误的
        // $(this)[0].attr("disabled",false)
    })




    // function change() {
    //     $("#aaa").attr("disabled",false)
    //     $("#bbb").attr("disabled",false)
    //     $("#ccc").attr("disabled",false)
    //     $("#ddd").attr("disabled",false)
    //     $("#eee").attr("disabled",false)
    //     $("#fff").attr("disabled",false)
    // }
  function change() {
        $("#fff").attr("disabled",false)
     }



</script>

</html>